<template>
	<view class="pages">
		<view class="top">
			<image src="../../static/fengxianpingce/bg19.png" class="bgtou" mode=""></image>
			<view class="status_bar"></view>
			<view class="title">
				<view  class="left">
					<image class="left" @click="goapge('/pages/other/ChooseExpert')" src="../../static/cut/2222.png" mode=""></image>
					<text v-if="unread_msg_count">{{unread_msg_count}}</text>
				</view>
				<image class="right" @click="sign" src="../../static/cut/1111.png" mode=""></image>
			</view>
			<!-- <view :class="CompanyPoint<60?'yuan backgrdRed': (CompanyPoint<80?'yuan backgrdyellow':'yuan backgrdblue')">
				<div style="height:100%;width:100%;position: relative;">
					<view class="num">{{CompanyPoint}}</view>
					<view class="fen">分</view>
					<view class="zi">
						<text>企业健康指数</text>
					</view>
				</div>
			</view> -->
			<view class="yuan" style="overflow: hidden;">
				<view class="shuiqiu">
				    <view class="shuiqiucontent">
				        <view class="shui shui2" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}" :style="{top: bollTopPx}"></view>
				        <view class="shui shui3" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}" :style="{top: bollTopPx}"></view>
				        <view class="shui shui4" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}" :style="{top: bollTopPx}"></view>
				        <view class="shui shui1" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}" :style="{top: bollTopPx}"></view>
				        <view class="shui shui5" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}" :style="{top: bollTopPx}"></view>
				        <view class="shui shui6" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}" :style="{top: bollTopPx}"></view>
				    </view>
				</view>
				<view class="num" style="position: absolute;top: -5px;">{{ CompanyScore }}</view>
				<view class="fen">分</view>
				<view class="zi"><text>企业健康指数</text></view>
			</view>
			<view class="tishiyu">
				企业健康指数良好，请继续保持
			</view>
		</view>
		
		<view class="weiTitle">
			<text>项目筛选</text>
			<!-- <image src="../../static/cut/20191123232532.png" mode=""></image> -->
		</view>
		<view class="uni-list">
			<view class="uni-list-cell list" v-for="(item,index) in getMyTopicList" :key="item.id">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<view class="leftBox">
						<image :src="baseURL+item.cover_pic" mode=""></image>
						{{item.topic}}
					</view>
					<view class="dian" v-if="item.is_red">·</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const MIN_SCORE  = 0;		// 最低分 0分
	const FULL_SCORE = 184;		// 满分时的最大TOP
	const TIMER_SCICLE = 20;	// 循环的时间，30毫秒
	export default {
		data() {
			return {
				baseURL:this.$API.baseURL,
				getMyTopicList:[],
				CompanyPoint:0,//评分
				CompanyScore: 0,
				bollTop: FULL_SCORE,
				bollTopPx: '126px',
				bollTopTimer: null,
				unread_msg_count:0,//用户现在未读消息的条数
			};
		},
		onHide() {
			// #ifdef APP-PLUS
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if(icon){icon.hide();}
			}, 100);
			// #endif
			
			clearInterval(this.bollTopTimer);
			this.bollTop = FULL_SCORE;
			this.bollTopPx = `${this.bollTop}px`;
			this.CompanyScore = MIN_SCORE;
		},
		onShow() {
			// #ifdef APP-PLUS
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if(icon){icon.show();}
			}, 101);
			// #endif
			this.getMyTopic();
			// this.getDangercart();
			this.getCompanyPoint();
			
			
			this.getConversation();
			var _this = this;
			_this.$appjs.jim.onMsgReceive(function(data) {
				uni.vibrateLong();
				
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = '/static/thebell/dingding.mp3';
				innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
				_this.getConversation();
			});
		},
		methods:{
			//获取会话列表  --- 获取消息的条数
			getConversation(){
				var _this = this;
				_this.$appjs.jim.getConversation().onSuccess(function(data) {
					_this.unread_msg_count = 0;
					data.conversations.forEach(function(v,i){
						_this.unread_msg_count = _this.unread_msg_count + v.unread_msg_count 
					})
					if(_this.unread_msg_count>99){
						_this.unread_msg_count = 99 + '+'
					}
				})
			},
			// 得分水球
			setWaterBoll(){
				// 设置动态水球
				let toTop = FULL_SCORE - (this.CompanyPoint * (FULL_SCORE / 100));
				this.bollTopTimer = setInterval(()=>{
					if(this.bollTop <= toTop){
						return clearInterval(this.bollTopTimer);
					}
					this.bollTop--;
					this.bollTopPx = `${this.bollTop}px`;
				}, TIMER_SCICLE - 10);
				
				// 设置动态分数
				let bollScoreTimer = setInterval(()=>{
					if(this.CompanyScore >= this.CompanyPoint){
						return clearInterval(bollScoreTimer);
					}
					this.CompanyScore++;
				}, TIMER_SCICLE);
			},
			//创建底部导航中间的圆形
			createtab: function(){
				var icon = plus.nativeObj.View.getViewById("icon");
				if(!icon){return false}
				icon.clearRect(0,0,'55px','55px');  
				console.log(icon)
				var backgrdColor = '#c8153f';
				this.CompanyPoint<60?backgrdColor='#c8153f': (this.CompanyPoint<80?backgrdColor='#ffd300':backgrdColor= '#368ce6')
				
				icon.drawRect({color:'#ffffff',radius:'55px'});
				icon.drawRect({color:'rgba(0,0,0,0)',borderColor:'#bfbfbf',borderWidth:'0.5px',radius:'55px'},{top:'0px',left:'0px',width:'100%',height:'100%'});
				icon.drawRect({color:'#ffffff'},{top:'25px',left:'0',width:'55px',height:'30px'});
				icon.drawRect({color:backgrdColor,radius:'43px'},{top:'6px',left:'6px',width:'43px',height:'43px'});
				icon.drawText(this.CompanyPoint, {top:'0px',left:'0px',width:'100%',height:'100%'},{align:'center','size':'28px','color':'#fff'});
			},
			//企业健康指数
			getCompanyPoint(){
				var _this = this;
				uni.request({
					url:this.$API.getCompanyPoint,
					method:"POST",
					data:{
						userid:uni.getStorageSync("userid"),
						company:uni.getStorageSync("company")
					},
					header:this.$API.get_head(),
					success: (res) => {
						_this.CompanyPoint = res.data.point;
						_this.setWaterBoll();
						_this.createtab();
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				})
			},
			changeSwiper(e){
				this.current = e.detail.current
			},
			//获取项目筛选列表2222
			getDangercart(){
				var _this = this;
				var reqdata = 
				uni.request({
					url:this.$API.getDangercart,
					method:"GET",
					data:{
						deptid: uni.getStorageSync("deptid"),
					},
					header:this.$API.get_head(),
					success: (res) => {
						_this.getMyTopicList = res.data.data;
					}
				})
			},
			//获取项目筛选列表
			getMyTopic(){
				var _this = this;
				var reqdata = 
				uni.request({
					url:this.$API.getMyTopic,
					method:"GET",
					data:{
						deptid: uni.getStorageSync("deptid"),
					},
					header:this.$API.get_head(),
					success: (res) => {
						_this.getMyTopicList = res.data.data;
					}
				})
			},
			goapge(e){
				uni.navigateTo({
					url:e,
				})
			},
			sign(){
				uni.navigateTo({
					url:"/pages/newpages/qiandao"
				})
			},
		}
	}

</script>

<style>
	@keyframes roll {
		form {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.shuiqiu {
		width: 184px;
		height: 184px;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
	}

	.shuiqiucontent {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		border-radius: 50%;
	}

	.shui {
		position: absolute;
		width: 1000px;
		height: 1000px;
		top: 184px;
		left: 50%;
		margin-left: -500px;
	}

	.shui1 {
		border-radius: 47.5%;
		background: #607d8bbe;
		animation: roll 10s linear infinite;
	}
	.shui1.red{background:#c8153f;}
	.shui1.blue{background:#3B81E3;}
	.shui1.yellow{background:#ffd300;}

	.shui2 {
		border-radius: 48%;
		background: #607d8b9a;
		animation: roll 14s linear infinite;
	}
	.shui2.red{background:#BC0A3E;}
	.shui2.blue{background:#3E83E5;}
	.shui2.yellow{background:#FCCE17;}

	.shui3 {
		border-radius: 48.5%;
		background: #607d8bab;
		animation: roll 12s linear infinite;
	}
	.shui3.red{background:#BC0D3E;}
	.shui3.blue{background:#3E86E8;}
	.shui3.yellow{background:#FACE17;}

	.shui4 {
		border-radius: 49%;
		background: #607d8b44;
		animation: roll 20s linear infinite;
	}
	.shui4.red{background:#BC083B;}
	.shui4.blue{background:#3E86EA;}
	.shui4.yellow{background:#F9CE17;}

	.shui5 {
		border-radius: 49.5%;
		background: #607d8b9f;
		animation: roll 16s linear infinite;
	}
	.shui5.red{background:#BB0D3E;}
	.shui5.blue{background:#3E83E3;}
	.shui5.yellow{background:#F7CE17;}

	.shui6 {
		border-radius: 50%;
		background: #607d8b38;
		animation: roll 19s linear infinite;
	}
	.shui6.red{background:#BB0A3B;}
	.shui6.blue{background:#367EE3;}
	.shui6.yellow{background:#F5CE17;}
</style>

<style>
	page{background:#FFFFFF;}
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	}
	.title{
		height:98upx;
		text-align: center;
		font-size:36upx;
		line-height:98upx;
		color: #333333;
		position:relative;
	}
	.top{width:100%;background: #007AFF;}
	.title .left{position:absolute;left:20upx;top:0;}
	.title .left image{width:42upx;height:37upx;}
	.title .left text{display: inline-block;width:10upx;height:10upx;border-radius:50%;position:absolute;right:0upx;top: 0upx;background:red;}
	.title .right{position:absolute;right:20upx;top:0;width:39upx;height:39upx;}
	
	.congtenData{background:#166edf;height: 710upx}
	.weiTitle{padding:8upx 24upx;background:#FFFFFF;}
	.weiTitle text{color: #2892ff;font-size:36upx;padding-left: 20upx;border-left:12upx solid #2892ff;font-weight:bold;}
	.weiTitle image{width: 12upx;height:24upx;float: right;margin-top:22upx;}
	.list image {width:50upx;height: 50upx;margin-right:10px;vertical-align: middle;}
	.list .dian{
		font-size: 96upx;
		line-height: 0upx;
		position: relative;
		top: -7upx;
		left: -10upx;
		color: red;
	}
	.uni-list:before{display: none;}
	
	
	
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	}
	.title{
		height:98upx;
		text-align: center;
		font-size:36upx;
		line-height:98upx;
		color: #333333;
		position:relative;
		z-index: 10;
	}
	.top{
		width:100%;background: #007AFF;
		position:relative;
		height:845upx;
	}
	.bgtou{
		width:100%;
		height:845upx;
		position:absolute;
		z-index: 1;
	}
	.yuan{
		width: 334upx;
		height: 334upx;
		border-radius: 50%;
		position: absolute;
		top: 260upx;
		left: 193upx;
		right: 0;
		bottom: 0;
		background: #368ce6;
		z-index: 2;

	}
	.backgrdRed{
		background:#c8153f;
	}
	.backgrdblue{
		background:#368ce6;
	}
	.backgrdyellow{
		background:#ffd300;
	}
	.yuan .num{
		position: absolute;
		color: #fff;
		font-size: 165upx;
		text-align: center;
		width: 100%;
		line-height: 275upx;
	}
	.yuan .fen{
		position: absolute;
		top: 50upx;
		right: 40upx;
		color: #fff;
		font-size: 26upx;
	}
	.yuan .zi{
		position: absolute;
		width: 100%;
		text-align: center;
		color: #fff;
		bottom: 40upx;
		font-size: 26upx;
	}
	.yuan .zi text{
		display: inline-block;
		border: 1upx solid #ab8374;
		padding: 8upx 10upx;
		border-radius: 20upx;
		line-height: 1;
	
	}
	.tishiyu{
		position: absolute;
		width: 100%;
		text-align: center;
		bottom:120upx;
		font-size:34upx;
		color:#FFFFFF;
		z-index:1;
	}
	.title .left{position:absolute;left:20upx;top:8upx;}
	.title .left image{width:42upx;height:37upx;}
	.title .left text{
		display: inline-block;
		width: 25upx;
		height: 25upx;
		border-radius: 50%;
		position: absolute;
		left: 50upx;
		top: -9upx;
		background: red;
		font-size: 15upx;
		color: #fff;
		line-height: 25upx;
		text-align: center;
	}
	.title .right{position:absolute;right:20upx;top:8upx;width:39upx;height:39upx;}
</style>